<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			table{
				width: 300px;
				height: 200px;
				/* margin: 0; */
				/* padding: 0; */
				text-align: center;
			}
			.jk{
				display: flex;
				/*设置主轴方向为x轴 */
				flex-direction: row;
				justify-content: center;
			}
			.td{
				background-color: #87ceeb;
				
			}
			#ck:checked{
				width: 20px;
				height: 20px;
			}
		</style>
	</head>
	<body>
		<div class="jk">
		<table border="1px solid red">
		<tr class="td">
			<th>
				<span>全选</span>
				<!-- <div lass="checkAll"> -->
					<input type="checkbox" name="" id="checkAll">
				<!-- </div> -->
			</th>
			<th>
				牌子
			</th>
			<th>
				描述
			</th>
		</tr>
		<tr>
			<td>
				<!-- <span></span> -->
				<input type="checkbox" name="" id="ck">
			</td>
			<td>小米10pro</td>
			<td>智慧全面屏，al自主双摄像</td>
			<!-- <td></td> -->
		</tr>
		<tr>
			<td>
				<input type="checkbox" name="" id="ck">
			</td>
			<td>小米13</td>
			<td>小屏真旗舰，谁用谁牛逼</td>
		</tr>
		<tr>
			<td>
				<input type="checkbox" name="" id="ck">
			</td>
			<td>小米13 utrl</td>
			<td>1英寸大摄像，拍人更美</td>
		</tr>
		</table>
			</div>
		<script>
			// 让下面所有的小复选框checkbox和全选框状态一致就完成了全选
			// 获取全选框
			const checkAll = document.querySelector('#checkAll');
			console.log(checkAll);
			// 获取所有的小复选框
			// querySelectorAll('#ck')获取到元素为伪数组
			const cks = document.querySelectorAll('#ck');
			console.log(cks);
			// 为大复选框注册点击事件
			checkAll.addEventListener("click",function(){
				
				// console.log(checkAll.checked);
				// 遍历伪数组,取出里面的每个元素
				for(let i=0;i<cks.length;i++){
					console.log(cks[i]);
					// 让小复选框的状态等于
					// 这里的this是checkAll
					cks[i].checked=this.checked;
				}
			});
			// 
			for(let j=0;j<cks.length;j++){
				cks[j].addEventListener('click',function(){
					// 获取选中状态的长度
					// 判断你小复选框的个数等不等于总的复选框个数
					 console.log(document.querySelectorAll('#ck:checked').length)
					 // 
					 console.log(document.querySelectorAll('#ck:checked').length === cks.length);
					checkAll.checked=document.querySelectorAll('#ck:checked').length === cks.length;
				})
			}
		</script>
	</body>
</html>